require("../../assets/css/index.less");
require("./sportData.less")


const { getEle, publicFooter, isLogin, ready, addEvent } = require("../../utils/dom")
const { get, post, BASE_URL } = require('../../utils/https')
const echarts = require("echarts")
isLogin()

ready(() => {
    addEvent("#goBack", () => history.back())

    get('/api/user/info', res => {
        let { errno, data } = res
        if (errno == 0) {
            getEle("#img").src = BASE_URL + data.imgUrl
        }
    })
    get("/api/exercise", res => {
        let { errno, data } = res
        console.log(data.days)
        if (errno == 0) {
            getEle("#sum7Duration").innerHTML = data.sum7Duration
            getEle("#sum7Calorie").innerHTML = data.sum7Calorie
            getEle("#sumCalorie").innerHTML = data.sum7Calorie
            getEle("#days").innerHTML = data.days.length
            getEle("#day").innerHTML = data.days.length
            let x = data.days.map(v => v.date.slice(v.date.indexOf('-') + 1))
            let y = data.days.map(v => v.sumDuration)
            let count = data.days.map(v => v.count)
            sportTime(x, y)


            sportNum(x, count)
        }
    })
})


//柱形图

function sportTime(x, y) {
    let myCharts = echarts.init(document.querySelector("#e1"));
    let option = {
        title: {
            text: "近7天运动时长",
            textStyle: {
                color: "#101010",
                fontSize: 14,
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        color: ['#81a5cf'],
        xAxis: {
            type: 'category',
            data: x,
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: y,
                type: 'bar'
            }
        ]
    };
    myCharts.setOption(option)
}

//扇形图
let cate = [
    { value: 1048, name: '跑步' },
    { value: 735, name: '骑行' },
    { value: 580, name: '训练' }
]
sportCate(cate)
function sportCate(arr) {
    let myCharts = echarts.init(document.querySelector("#e2"));
    let option = {
        //标题
        title: {
            text: '运动分类',
            textStyle: {
                color: "#101010",
                fontSize: 14
            }
        },

        //提示框
        tooltip: {
            trigger: 'item'
        },
        //图例
        legend: {
            orient: 'vertical',
            left: 'left',
            top: "center",
            icon: "rect",
            itemWidth: 10,
            itemHeight: 10
        },

        //核心
        color: ["#736171", "#ee5c43", "#58bb92"],
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: arr,
                label: {
                    position: "inside",
                    color: "#FFF",
                    formatter: "{d}%"
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myCharts.setOption(option)
}
//折叠条形图


e3(cate)
function e3(arr) {
    let myCharts = echarts.init(document.querySelector("#e3"));
    let option = {
        title: {
            text: "近7日运动分类",
            textStyle: {
                color: "#101010",
                fontSize: 14,
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            orient: 'vertical',
            right: "right",
            top: "center",
            icon: "rect",
            itemWidth: 10,
            itemHeight: 10
        },
        grid: {
            left: '3%',
            right: '15%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        color: ["#558ed5", "#93cddd", "#92d050"],
        series: [
            {
                name: '跑步',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
                name: '骑行',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '训练',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
        ]
    };
    myCharts.setOption(option)
}
//线性图

function sportNum(x,count) {
    let myCharts = echarts.init(document.querySelector("#e4"))
    let option = {
        title: {
            text: "近7日训练次数",
            textStyle: {
                color: "#101010",
                fontSize: 14
            }
        },
        color: ["#56b29f"],
        xAxis: {
            type: 'category',
            data: x
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: count,
                type: 'line',
                symbol: "circle"
            }
        ]
    };
    myCharts.setOption(option)
}